<template>
      <!-- 前台系统健康档案详情对话框 -->
      <el-dialog
            title="健康档案表单"
            :visible.sync="centerDialogVisible"
            width="80%"
            style="height: 600;"
            >
            <el-form>
                    <el-form-item style="margin-left: 76%;">
                        <el-input v-model="searchValue" placeholder="请输入时间(可以模糊匹配)" style="width: 300px;"></el-input>
                    </el-form-item>
            </el-form>
            <div style="width: 100%;height: 400px; overflow: auto;">
                <!-- 表单中的内容 -->
                <el-table
                    :data="healthList"
                    style="width: 100%">

                    <el-table-column
                    label="创建时间"
                    prop="create_time"
                    width="100">
                    </el-table-column>

                    <el-table-column
                    label="性别"
                    prop="sex"
                    width="50">
                    </el-table-column>

                    
                    <el-table-column
                    label="年龄"
                    prop="age"
                    width="50">
                    </el-table-column>

                    <el-table-column
                    label="负责人"
                    prop="older_employee_name"
                    width="130">
                    </el-table-column>

                    
                    <el-table-column
                    label="身高(cm)"
                    prop="height"
                    width="55">
                    </el-table-column>

                    <el-table-column
                    label="体重(kg)"
                    prop="weight"
                    width="55">
                    </el-table-column>

                    <el-table-column
                    label="呼吸频率(次/min)"
                    prop="respiratory_rate"
                    width="80">
                    </el-table-column>


                    <el-table-column
                    label="脉搏(次/min)"
                    prop="pulse"
                    width="107">
                    </el-table-column>


                    <el-table-column
                    label="低压(mmHg)"
                    prop="min_pressure"
                    width="108">
                    </el-table-column>

                    <el-table-column
                    label="高压(mmHg)"
                    prop="high_pressure"
                    width="108">
                    </el-table-column>

                    <el-table-column
                    label="心电图"
                    prop="electrocardiogram"
                    width="76">
                    </el-table-column>

                    <el-table-column
                    label="体温(°C)"
                    prop="temperature"
                    width="75">
                    </el-table-column>

                    <el-table-column
                    label="疫苗(次)"
                    prop="vaccination"
                    width="73">
                    </el-table-column>

                    <el-table-column
                    label="建档人"
                    prop="employee_name"
                    width="130">
                    </el-table-column>

                    
                    <el-table-column
                    label="其他信息"
                    prop="other_info"
                    width="120"
                    show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    export default {
        name:'UserHealthFiles',
        data() {
            return {
                // 控制对话框的展开关闭
                centerDialogVisible:false,
                // 存放所有的健康档案信息
                healthList:[],
                // 存放所有健康信息数据
                allHealthDate:[],
                // 搜索的数据
                searchValue:''
            }
        },
        watch:{
            // 监视健康档案信息
            searchValue(){
                if(this.searchValue !== ''){
                    this.healthList = this.allHealthDate.filter((item)=>{
                        return item.create_time.indexOf(this.searchValue) !== -1
                    })
                }else{
                    this.healthList = this.allHealthDate;
                }
            }
        },
        methods:{
            // 触发对话框的事件回调
            userHealthFilesDialogBox(flag){
                // 获取当前登录用户的所有健康档案
                const id = JSON.parse(sessionStorage.getItem('user')).id;
                this.searchValue = '';
                myAxios(
                    'http://localhost:8088/older/getallhealthfilesbyolderid?id='+id,
                    'get',
                    null,
                    (data)=>{
                        if(data.length === 0){
                            // 提示一下
                            this.$message({
                                message: '没有健康档案!',
                                type: 'warning'
                            });
                        }else{
                            this.allHealthDate = data;
                            this.healthList = data;
                            this.centerDialogVisible = flag;
                        }
                    }
                )
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('userHealthFiles',this.userHealthFilesDialogBox);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('userHealthFiles');
        }
    }
</script>

<style>

</style>